<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操作发票</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{__STATIC__}/layuiAdmin/layui/css/layui.css" rel="stylesheet">
    <link href="{__STATIC__}/layuiAdmin/adminui/dist/css/admin.css" rel="stylesheet">
    <link href="{__STATIC__}/layuiAdmin/style/style.css" rel="stylesheet">
    <style>
        html {background: #fff;padding-top: 20px;}
    </style>
</head>
<body>
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">发票类型：</label>
            <div class="layui-form-mid layui-word-aux">{$data.type}</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发票抬头：</label>
            <div class="layui-form-mid layui-word-aux">{$data.tax_title}</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">税号：</label>
            <div class="layui-form-mid layui-word-aux">{$data.tax_sn}</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开票金额：</label>
            <div class="layui-form-mid layui-word-aux">{$data.fee}</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开票备注：</label>
            <div class="layui-form-mid layui-word-aux">{$data.info}</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发票内容：</label>
            <div class="layui-form-mid layui-word-aux" style="line-height: 26px;">
                {volist name="$data.goods_list" id="vo"}
                {$vo}<br>
                {/volist}
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">当前状态：</label>
            <div class="layui-input-inline w200">
                <select name="m_state" lay-filter="m_state">
                    <option value="1" {eq name="$data.state" value="1"}selected{/eq}>待开票</option>
                    <option value="2" {eq name="$data.state" value="2"}selected{/eq}>已开票</option>
                    <option value="3" {eq name="$data.state" value="3"}selected{/eq}>已驳回</option>
                </select>
            </div>
        </div>
        <div id="span_agree" {neq name="$data.state" value="2"}style="display: none;"{/neq}>
            <div class="layui-form-item">
                <label class="layui-form-label"><span>*</span> 发票号码：</label>
                <div class="layui-input-inline">
                    <input type="text" name="m_tax_no" value="{$data.tax_no}" placeholder="请输入发票编号" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">开具的发票上的号码</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span>*</span> 发票图片：</label>
                <div class="layui-input-inline">
                    <input type="text" id="m_pic" name="m_pic" value="{$data.tax_pic}" placeholder="请上传发票图片" class="layui-input">
                </div>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-info" id="btn_upload" style="padding-left: 10px;padding-right: 10px;">
                        <i class="layui-icon">&#xe681;</i>上传
                    </button>
                    <button type="button" class="layui-btn layui-btn-info" id="btn_preview" style="padding-left: 10px;padding-right: 10px;">
                        <i class="layui-icon">&#xe615;</i>预览
                    </button>
                </div>
                <span style="display:none;" id="pic"><img id="yl_pic" src="{:getPic($data.tax_pic)}"></span>
            </div>
        </div>
        <div class="layui-form-item" id="span_reason" {neq name="$data.state" value="3"}style="display: none;"{/neq}>
            <label class="layui-form-label">驳回原因：</label>
            <div class="layui-input-block">
                <textarea name="m_reason" placeholder="请输入驳回原因" class="layui-textarea">{$data.reason}</textarea>
            </div>
        </div>

        <input type="hidden" name="m_id" value="{$data.id}">
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="LAY-submit" id="LAY-submit" value="确认">
        </div>
    </div>
</body>
</html>
<script src="{__STATIC__}/layuiAdmin/layui/layui.js"></script>
<script>
    layui.use(function(){
        let $ = layui.$;
        let upload = layui.upload;
        let form = layui.form;

        /* 监听类型 */
        form.on('select(m_state)',function (data) {
            if(data.value == 3){
                $("#span_reason").hide();
                $("#span_agree").hide();
            }
            if(data.value == 2){
                $("#span_reason").hide();
                $("#span_agree").show();
            }
            if(data.value == 3){
                $("#span_reason").show();
                $("#span_agree").hide();
            }
        });

        //上传
        upload.render({
            elem: '#btn_upload'
            ,url: "{:url('upload/index')}"
            ,data: {dir: 'bill'}
            ,accept: 'images'
            ,before: function () {
                layer.load();
            }
            ,done: function(res){
                layer.closeAll();
                if(res.code == 0) {
                    $('#m_pic').val(res.data.file);
                    $('#yl_pic').attr('src',res.data.src);
                }
                else {
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                layer.closeAll();
                layer.msg('请求异常');
            }
        });
        //预览
        $('#btn_preview').click(function () {
            layer.open({
                type: 1,
                shade: false,
                title: false,
                content: $('#pic')
            });
        });

    })
</script>